<template>
  <a-modal
    title="费用明细"
    v-model:visible="showModal"
    class="limit-modal"
    unmount-on-close
    :mask-closable="false"
    width="65vw"
    @close="onClose"
  >
    <div class="fee-page">
      <div class="fee-list">
        <div v-for="(item, index) in feeList" :key="index" style="margin: 0 20px">
          <feeitemShortOrder :fee="item" v-if="bizType == 1" />
          <feeitemLongOrder :fee="item" v-if="bizType == 4" />
          <!-- bizType:2 车辆运维 -->
          <template v-if="bizType == 2">
            <!-- 
              feeCategory: 0 车辆购置费
              feeCategory: 1 保养
              feeCategory: 2 维修
              feeCategory: 3 年检
              feeCategory: 4 违章
              feeCategory: 41 违章待办真实成本
              feeCategory: 5 其他费用
              feeCategory: 6 借调费
            -->
            <feeitemViolation v-if="item.feeCategory && (item.feeCategory == 4 || item.feeCategory == 41)" :fee="item" />
            <feeitemAssets
              v-if="item.feeCategory == 1 || item.feeCategory == 2 || item.feeCategory == 3"
              :fee="item"
              :supplierType="item.feeCategory"
            />
            <!-- <feeitemTransfer v-if="item.feeCategory == 6" :record="item" /> -->
            <feeitemPurchase v-if="item.feeCategory == 0 || item.feeCategory == 6 || item.feeCategory == 5" :fee="item" />
          </template>
        </div>
        <div class="all-cost">
          <span>合计</span>
          <div class="cost-num">
            <div>{{ feeCostAmount.orderAmount > 0 ? '应收' : '应付' }}：{{ unitVal(Math.abs(feeCostAmount.orderAmount), '元') }}</div>
            <div style="margin-top: 16px">{{ feeCostAmount.orderAmount > 0 ? '待收' : '待付' }}：0元</div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button type="primary" @click="onClose">关闭</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import feeitemShortOrder from './comfirm-fee-item-short-order.vue'
  import feeitemLongOrder from './comfirm-fee-item-long-order.vue'
  import feeitemViolation from './comfirm-fee-item-violation.vue'
  import feeitemAssets from './comfirm-fee-item-assets.vue'
  // import feeitemTransfer from './comfirm-fee-item-transfer.vue'
  import feeitemPurchase from '@/views/assets/car/car-manage/components/comfirm-fee-item.vue'
  import { getOrderRecordDetail } from '@/api/finance/turnover'
  import { unitVal } from '@/utils'
  import { ref } from 'vue'
  const showModal = ref(false)

  const feeCostAmount = ref({})
  const feeList = ref([])
  const record = ref({})
  const bizType = ref()

  const show = (record) => {
    console.log(record)
    showModal.value = true
    if (record.id) {
      getFeeDetailApi(record.id)
    }
  }
  const onClose = () => {
    feeCostAmount.value = {}
    feeList.value = []
    record.value = {}
    showModal.value = false
  }
  const getFeeDetailApi = (id) => {
    getOrderRecordDetail({ id: id }).then((res) => {
      feeCostAmount.value = res.result
      feeList.value = res.result.orderFeeList
      record.value = res.result
      bizType.value = res.result.bizType
    })
  }
  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .fee-list {
    padding-top: 20px;
    border: 1px solid #f2f3f5;
  }
  .all-cost {
    font-weight: 600;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #f2f3f5;
    height: 100px;
    .cost-num {
      color: #1890ff;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
  // 弹窗添加的样式
  .fee-page {
    width: 100%;

    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
